<template>
	<div class="account-avatar-bg box-border rounded-full h-0" :style="style"></div>
</template>
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { colorAlpha } from '@/utils'
import { AvatarBackground } from '@/types'

const defaultBackground = {
	f: ['#fff', '1'],
	t: ['#000', '0.1']
}

const props = defineProps({
	data: {
		type: Object as PropType<AvatarBackground>
	},
	width: {
		type: Number,
		default: 28
	}
})

const style = computed(() => {
	const { f, t } = props.data || defaultBackground
	const fromColor = colorAlpha(f[0], f[1])
	const toColor = t ? colorAlpha(t[0], t[1]) : fromColor
	return {
		width: props.width + 'px',
		height: props.width + 'px',
		background: `linear-gradient(to bottom, ${fromColor}, ${toColor})`
	}
})
</script>
